<template>
    <el-dialog
        title="添加爬虫任务"
        :visible.sync="dialogVisible"
        width="65%"
        :close-on-click-modal="false"
    >
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">添 加</el-button>
        </span>
        <div class="form">
            <el-form :model="form" ref="form" :rules="rules" label-width="140px">
                <el-form-item label="爬虫任务名称" prop="name">
                    <el-input v-model="form.name"  placeholder="请填写任务名称"/>
                </el-form-item>
                <el-form-item label="爬虫程序" prop="reptileClass">
                    <el-select v-model="form.reptileClass" placeholder="请选择爬虫程序">
                        <el-option
                            v-for="(item, index) in options"
                            :key="index"
                            :label="item.name"
                            :value="item.type"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="启始URL" prop="startUrl">
                    <el-input
                        rows="5"
                        type="textarea"
                        v-model="form.startUrl"
                        placeholder="填写爬虫任务启开始的URL(不同的爬虫程序有固定的启始URL规范)"
                    />
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>
<script>
import { fetchPost, fetchPostAuthLogin } from '../../../http';
export default {
    data() {
        return {
            dialogVisible: false,
            rules: {
                name: {
                    required: true,
                    message: "请输入爬虫任务名称",
                    trigger: "blur"
                },
                reptilClass: {
                    required: true,
                    message: "请选择爬虫程序",
                    trigger: "blur"
                },
                startUrl: {
                    required: true,
                    message: "请填写URL",
                    trigger: "blur"
                }
            }
        };
    },
    props: {
        options: Array,
        form: {
            name: String,
            reptileClass: String,
            startUrl: String
        },
        mode: String
    },
    methods: {
        open() {
            this.dialogVisible = true;
        },
        close() {
            this.dialogVisible = false;
        },
        submit() {
            var self = this;
            this.$refs.form.validate((valid) => {
                if(valid) {
                    if(self.mode == "save") {
                        self.save();
                    }else if(self.mode == "update") {
                        self.update();
                    }
                }
            })
        },
        save() {
            var self = this;
            fetchPost("/workBug/save", self.form).then(() => {
                self.$emit("loadTable");
                self.close();
            });
        },
        update() {
            var self = this;
            fetchPost("/workBug/update", self.form).then(() => {
                self.$emit("loadTable");
                self.close();
            });
        }
    }
};
</script>
<style scoped>
.form {
    width: 500px;
}
</style>